<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      打印
      <div class="my-define-dialog-title-btn">
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-form size="medium" ref="myForm" :model="formData" :label-width="labelForm.labelWidth"
      :label-position="labelForm.labelPosition">
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="formData.printType">
            <el-radio :label="1">默认格式</el-radio>
            <el-radio :label="2">逐条打印</el-radio>
            <el-radio :label="3">整页打印</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="24" style="margin-top: 15px;">
          <el-form-item label="份数">
            <el-input size="mini" v-model="formData.totalCount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: right;">
          <el-button size="mini" @click="onPrintView">预览</el-button>
          <el-button type="primary" @click="onPrint" size="mini">打印</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog custom-class="my-common-dialog my-print-dialog" :width="dialogWidth" :visible.sync="showPreview"
      :show-close="false" append-to-body :before-close="handleClosePreview">
      <div class="my-define-dialog-title">
        打印
        <div class="my-define-dialog-title-btn">
          <span v-if="formData.printType==2">
            <i @click="goPreData" v-if="dataIndex>0" class="el-icon el-icon-arrow-up"></i>
            <i @click="goNextData" v-if="dataIndex<tableData.length" class="el-icon el-icon-arrow-down"></i>
          </span>
          <i @click="showPreview=false" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
        </div>
      </div>
      <div style="text-align: center;padding: 10px 20px;">
        <el-scrollbar :style="customeStyle" class="my-form-scrollbar">
          <div :columnFinalData="columnFinalData" :tableData="tableData" :is="printViewName" :dataIndex="dataIndex">
          </div>
        </el-scrollbar>
      </div>
      <div style="padding: 10px 0;text-align: right;">
        <el-button size="mini" @click="showPreview=false">取消</el-button>
        <el-button type="primary" @click="onPrint" size="mini">打印</el-button>
      </div>
    </el-dialog>
    <div v-show="false">
      <div id="print_content">
        <div :columnFinalData="columnFinalData" :tableData="tableData" :printTitle="printTitle" :is="printViewName"
          :dataIndex="dataIndex">
        <!-- <div ref="refCommForm" :reqForm="reqForm" :is="printViewName" :sceneType="sceneType" :sceneId="sceneId" -->
          :defineSceneId="defineSceneId" keep-alive></div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import printJS from 'print-js'
  import {
    getColumns
  } from '@/api/system/column'
  import printTable from "@/views/master/PrintTable"
  import printForm from "@/views/master/PrintForm"
  export default {
    name: 'print-choose',
    components: {
      printTable,
      printForm
    },
    props: {
      reqForm: {
        type: Object,
        default: () => ({
          formData: {},
          dialogTitle: '',
          uploadFormData: {
            required: false,
            uploadFile: false,
            uploadFolder: 'Service',
            fileList: [],
            listType: 'picture-card'
          },
          denyEdit: false,
          recordData: []
        })
      },
      sceneType: {
        type: Number,
        default: 0
      },
      sceneId: {
        type: Number,
        default: 0
      },
      defineSceneId: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        formData: {
          printType: 1,
          totalCount: 1
        },
        labelForm: {
          labelWidth: '50px',
          labelPosition: 'left'
        },
        printTitle: '资源列表',
        columnFinalData: [],
        dialogWidth: '50%',
        showPreview: false,
        tableData: [],
        customeStyle: {
          height: (window.innerHeight - 260) + 'px'
        },
        printId: 'print_content',
        printViewName: '',
        dataIndex: 0
      }
    },
    computed: {},
    created() {
      this.getColumnData()
      const dataSourceStr = localStorage.getItem('print_data_' + this.sceneId)
      if (dataSourceStr) {
        this.tableData = JSON.parse(dataSourceStr)
      }
    },
    methods: {
      // 获取列
      getColumnData() {
        getColumns({
          sceneType: this.sceneType,
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId
        }).then(res => {
          if (res.status) {
            var allColumnData = res.outputData.columnList
            this.columnFinalData = allColumnData.filter(function(item) {
              return !item.deleted && item.visibile;
            })
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doClosePop", reload)
      },
      handleClosePreview() {
        this.showPreview = false
      },
      getColumnAlign(item) {
        if (item.formFieldType == 9) {
          return 'center'
        }
        return 'center'
      },
      getMyFormatClassName(scope) {
        if (!scope.row.formatExtendList) {
          return ''
        }
        var myList = scope.row.formatExtendList.filter(function(item) {
          return item.property == scope.column.property
        })
        if (myList.length > 0) {
          return myList[0].className || ''
        } else {
          return ''
        }
      },
      goPreData() {
        if (this.dataIndex == 0) {
          return
        }
        this.dataIndex--
      },
      goNextData() {
        if (this.dataIndex >= this.tableData.length) {
          return
        }
        this.dataIndex++
      },
      onPrintView() {
        if (this.formData.printType == 2) {
          this.printViewName = 'printForm'
        } else {
          this.printViewName = 'printTable'
        }
        this.showPreview = true
      },
      submitForm() {
        this.$$parent(this, "doClosePop", false)
      },
      onPrint() {
        var marginTop = '0pt'
        if (this.formData.printType == 2) {
          this.printViewName = 'printForm'
          marginTop = '20pt'
        } else {
          this.printViewName = 'printTable'
        }
        this.$nextTick(() => {
          // var columnProperties = []
          // this.columnFinalData.forEach((item) => {
          //   columnProperties.push({field:item.name,displayName:item.label})
          // })
          // var columnData = []
          // printJS({
          //   printable: this.tableData,
          //   properties: columnProperties,
          //   type: 'json',
          //   header: this.printTitle,
          //   headerStyle: 'padding:10px 0;text-align:center;font-weight:normal;font-size:14pt !important;',
          //   header: `<div class="my-print-title" style="font-size: 16px !important;text-align:center;margin: 20px 0;">资源</div>`
          // })
          // return
          printJS({
            printable: this.printId, // 标签元素id
            type: 'html',
            targetStyles: ['*'],
            scanStyles: true,
            style: `@page {margin-top:` + marginTop + `;size: auto;}
                      thead th {
                        border: 1px solid #000;
                        text-align: center;
                        border-bottom: 0px;
                        padding: 10pt 0;
                      }
                      thead th.noborder {
                        font-size: 14pt;
                        font-weight: normal;
                        border: 0px;
                      }
                      tbody td {
                        border: 1px solid #000;
                        text-align: center;
                        word-wrap:break-word;
                        max-width: 50px;
                      }
                      tbody {
                        text-align: center;
                      }
                      table {
                        border-collapse: collapse;
                        border-spacing: 0;
                        width: calc(100% - 20px);
                      }`,
          })
          this.$$parent(this, "doClosePop", false)
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .my-common-dialog.my-print-dialog .el-dialog__body {
    background-color: #fff;
  }
</style>
